<script setup>
// 可以在这里添加数据或逻辑
</script>

<template>
  <div class="container">
    <div class="item_box" v-for="item in 4" :key="item">
      <div class="image-container">
        <img src="@/assets/markdown.png" alt="Markdown语法" />
      </div>
      <div class="passage">
        <h2 class="title">Markdown语法与外置标签写法汇总</h2>
        <div class="info">
          <span class="time">2024-01-15</span>
          <span class="tag">技术</span>
          <span class="tag">文档</span>
          <span class="tag">6条评论</span>
        </div>
        <p class="text" v-for="i in item" :key="i">
          Markdown语法自带格式参考：Markdown语法图文全面详解(10分钟学会)注意此页面偶尔会怎么样我我会怎么样会怎么样会怎么样
        </p>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.container {
  width: 900px;
  background: #999;
  columns: 2;
  .item_box {
    width: 380px;
    background-color: #fff;
    border-radius: 10px;
    margin-bottom: 20px;
    break-inside: avoid;

    .image-container {
      width: 100%;
      height: 200px;
      overflow: hidden;
      border-radius: 10px 10px 0 0;

      img {
        width: 100%;
        height: 100%;
        overflow: hidden;
        object-fit: cover;
        transition: transform 0.6s;
      }
    }

    .passage {
      display: flex;
      flex-direction: column;
      padding: 30px 30px 25px 30px;

      .title {
        color: #1f2d3d;
        font-size: 18px;
        margin-bottom: 12px;
        line-height: 1.4;
        transition: color 0.2s ease-in-out;
        cursor: pointer;

        &:hover {
          color: #49b1f5;
        }
      }

      .info {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 14px;
        margin-bottom: 12px;
        color: #858585;

        .time {
          color: #999;
        }

        .tag {
          padding: 2px 8px;
          background: #f0f0f0;
          border-radius: 4px;
          color: #666;
        }
      }

      .text {
        line-height: 1.6;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

    &:hover {
      .image-container img {
        transform: scale(1.1);
      }
    }
  }
}
</style>
